<template>
  <div class="hello">
    <header>
      <div class="head">
        <span><router-link to="/denglu"><img src="../assets/ren.png"></router-link></span>
        <span>
          搜地点&nbsp;&nbsp;查公交&nbsp;&nbsp;找路线
        </span>
        <span><img src="../assets/yuyin.png"></span>
      </div>
    </header>
<div class="sildea">
<img src="../assets/lukuang.png">
</div>
<div class="sildeb">
  <img src="../assets/quanjing.png">
</div>

<footer>
<span><router-link to="/Index"><img src="../assets/faxian.png"></router-link></span>
<span>
发现周边服务
</span>

</footer>
    <router-view></router-view>
<div class="map">
      <iframe width="604" height="865" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://j.map.baidu.com/G3fte">
      </iframe>
</div>
    </div>
  </template>

  <script>
    export default {
      name: 'indexone'
  // data () {
  //   return {
  //     msg: 'Welcome bianJi'
  //   }
  // }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
  }
  *{
    padding: 0;
    margin: 0;
  }
  ul {
    list-style-type: none;
  }
  body,html{
    width:100%;
  }
  .txh{
    display: flex;
    display: -webkit-flex;
  }
  .map{
    padding-top: 80px;
    padding-bottom: 120px;
    height: 70%;
   margin-top: -30px;
//    iframe{
// margin: -30px;
//    }
 }
 header{
  position: fixed;
  .px2rem(top,32);
  z-index: 1;
  width:100%;
  .txh();
  justify-content: center;
  align-items: center;
  .px2rem(height,70);
  .head{
    border-radius: 5px;
    width:83%;
    .txh();
    justify-content: space-between;
    background: #eeeeee;
    align-items: center;
.px2rem(height,70);
    span{
      display: block;
    }
    span:first-child{
      height:100%;
      border-right:1px solid #bfbfbf;
      .txh();
    align-items: center;
      img{
        display: block;
        .px2rem(width,39);
        .px2rem(height,44);
        .px2rem(margin-left,19);
        .px2rem(margin-right,25);
      }
    }
    span:last-child{
      height:100%;
      border-left:1px solid #bfbfbf;
      .txh();
    align-items: center;

      img{
        .px2rem(width,39);
        .px2rem(height,44);
        .px2rem(margin-left,24);
        .px2rem(margin-right,27);
      }
    }
  }
}
.sildea,.sildeb{
  position: fixed;
  .px2rem(right,63);
.px2rem(width,83);
.px2rem(height,67);
background: #eeeeee;
.px2rem(top,160);
.txh();
align-items: center;
border-radius: 5px;
justify-content: center;
img{
  display: block;

.px2rem(width,38);
.px2rem(height,44);
}
}
.sildeb{
.px2rem(top,285);
}
footer{
  position: fixed;
  bottom: 0px;
width: 100%;
background: #eeeeee;
.px2rem(height,59);
.txh();
align-items: center;
img{
.px2rem(height,38);
.px2rem(margin-left,30);

}
span:last-child{
.px2rem(margin-left,44);
}
}
</style>
